<template>
  <div class="ListItem">
    <div
      @click="GoAudioBookDetails(item.content_id)"
      v-for="item in contentArr.data"
      :key="item.content_id"
    >
      <!-- 布局开始 -->
      <div class="ListItem-box">
        <!-- 不同类型 渲染的图片类型不一样 -->
        <img
          v-if="item.data_type == 0"
          :src="item.small_background_img"
          alt=""
        />
        <img v-if="item.data_type == 1" :src="item.content_imgs[0]" alt="" />
        <!-- 合辑上的文字 -->
        <p class="ListItem-box-img-heji" v-if="item.data_type == 1">合辑</p>
        <!-- 右边 -->
        <div class="ListItem-right">
          <!-- 头部 -->

          <van-divider
            :style="{ borderColor: '#ccc', margin: '0', fontSize: '12px' }"
            content-position="left"
            >{{ item.author }}</van-divider
          >

          <!-- 标题啥的 -->
          <div class="ListItem-right-title">
            <p>{{ item.title }}</p>
            <p>{{ item.subtitle }}</p>
          </div>
          <!-- 下面价格会员啥的 -->
          <div class="ListItem-right-bot">
            <!-- 判断免费节目 -->
            <div class="ListItem-right-bot-free" v-if="item.type == 'free'">
              免费节目
            </div>

            <!-- 有价格 但是会员免费 -->
            <div
              class="ListItem-right-bot-vipFree"
              v-if="
                item.type == 'charge' &&
                item.is_vip_free == 1 &&
                item.is_vip_only == 0
              "
            >
              <p>￥{{ item.sale_price }}</p>
              <span>会员免费</span>
              <s v-if="item.is_promotion == 1"
                >￥{{ item.complete_class_price }}</s
              >
            </div>

            <!-- 会员专享 -->
            <div
              class="ListItem-right-bot-vipOnly"
              v-if="item.is_vip_only == 1"
            >
              会员专享
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassListItem",
  props: ["contentArr"],
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$nextTick(() => {});
  },
  // beforeUpdate() {
  //   this.$nextTick(() => {
  //     this.list = this.contentArr.data;
  //   });
  // },
  methods: {
    GoAudioBookDetails(id) {
      // console.log(id);
      this.$router.push({
        path: "/BookDetails",
        query: {
          id,
        },
      });
    },
    // onLoad() {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    // if (this.contentArr) {
    //   this.$http(this.contentArr.next_page_url).then(({ data }) => {
    //     data = data.data;
    //     data.map((item) => {
    //       return this.list.push(item);
    //     });
    //   });
    // }
    // },
  },
};
</script>

<style lang="scss" scoped>
.ListItem {
  height: 100%;
  word-break: break-all;
  margin-bottom: 3.75rem;
  > div {
    margin: 1.25rem 0;
  }
  .ListItem-box {
    display: flex;
    img {
      width: 6.25rem;
      height: 8.125rem;
    }
    // 合辑上的文字
    .ListItem-box-img-heji {
      position: absolute;

      color: #91896c;
      background-color: #28354a;
      font-size: 0.8125rem;
      padding: 0.3125rem;
    }
    .ListItem-right {
      width: 100%;
      position: relative;
      margin-left: 0.625rem;
      .ListItem-right-title {
        p:nth-child(1) {
          font-size: 0.875rem;
        }
        p:nth-child(2) {
          margin: 0.625rem 0;
          color: var(--fontcolor);
          font-size: 0.75rem;
        }
      }
      .ListItem-right-bot {
        width: 100%;
        position: absolute;
        bottom: 0;
        .ListItem-right-bot-free {
          font-size: 0.8125rem;
          color: #cb4c0a;
        }
        .ListItem-right-bot-vipFree {
          display: flex;
          align-items: center;
          position: relative;
          p {
            font-size: 0.8125rem;
            color: #cb4c0a;
          }
          span {
            font-size: 0.75rem;
            padding: 0.25rem;
            box-sizing: border-box;
            background-color: #faf6de;
            color: #d9ca9f;
          }
          s {
            font-size: 0.8125rem;
            color: var(--fontcolor);
            position: absolute;
            right: 0;
          }
        }
        .ListItem-right-bot-vipOnly {
          color: #cb4c0a;
          font-size: 0.8125rem;
        }
      }
    }
  }
}
</style>